<template>
  <div class="wrap-container">
    <CommonTreeMain
      ref="leftTreeRef"
      :url="treeUrl"
      @callback-tree-expand-rows="callBackExpandRowKeys"
      @handle-node-click="onNodeClick"
    >
      <template #main>
        <KingTable ref="kingTable" :tableOptions="_tableOptions">
          <!-- 表格 header 按钮 -->
          <template #tableHeader>
            <el-button type="primary" :icon="CirclePlus" @click="handleBtnAction(operateType.ADD, { id: '' })"> 新增 </el-button>
          </template>
          <!-- 表格操作 -->
          <template #operation="scope">
            <TableRowBtns :row="scope.row" @handle-row-action="handleBtnAction" />
          </template>
        </KingTable>
      </template>
    </CommonTreeMain>
    <edit ref="editRef" @on-success="fetchTableData" />
    <info ref="infoRef" />
  </div>
</template>

<script setup lang="tsx" name="OrgUserList">
import { ref, reactive } from "vue";
import { failMsg } from "@/utils/MessageUtils";
import KingTable from "@/components/KingTable/index.vue";
import TableRowBtns from "@/components/KingTable/components/TableRowBtns.vue";
import SelectVxeTreeOne from "@/plugins/tree/SelectVxeTreeOne.vue";
import { CirclePlus } from "@element-plus/icons-vue";
import { operateType } from "@/plugins/commonType.enum";
import CommonTreeMain from "@/plugins/tree/CommonTreeMain.vue";
import Edit from "./components/orgUserEdit.vue";
import Info from "./components/orgUserInfo.vue";

const treeUrl = ref("system/org/query"); //左边树请求url

const editRef = ref();
const infoRef = ref();
const leftTreeRef = ref();

const onNodeClick = (treeNodeId: string) => {
  _initParam.LIKE_orgid = treeNodeId;
  // fetchTableData();//监听参数,不需主动查询
};

const callBackExpandRowKeys = (expandRowKeys: any) => {
  if (expandRowKeys && typeof expandRowKeys != "undefined") {
    onNodeClick(expandRowKeys.value[0]);
  }
};

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const kingTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _initParam = reactive({ LIKE_orgid: "", EQ_ss: 1 });

// 表格配置项
const _tableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "orgName",
    label: "所属机构",
    width: 120
  },
  {
    prop: "userName",
    label: "登录名",
    width: 120
  },
  {
    prop: "nickName",
    label: "用户昵称",
    overflow: true,
    width: 120
  },
  { prop: "sex", label: "性别", width: 80, dictCode: "sys_user_sex" },

  {
    prop: "phonenumber",
    label: "手机",
    align: "left",
    overflow: true,
    width: 120
  },
  {
    prop: "email",
    label: "邮箱",
    align: "left",
    overflow: true,
    width: 210
  },
  {
    prop: "loginIp",
    label: "最后登录IP",
    align: "left",
    overflow: true,
    width: 210
  },
  {
    prop: "loginDate",
    label: "最后登录时间",
    align: "left",
    overflow: true,
    width: 210
  },
  {
    prop: "status",
    label: "状态",
    dictCode: "UserStatus",
    overflow: true,
    width: 80
  },
  { prop: "operation", label: "操作", fixed: "right", width: 160 }
];

const _searchCols = [
  {
    prop: "EQ_orgid",
    label: "机构",
    width: 100,
    render: ({ searchParam }: { searchParam: any }) => {
      return (
        <div class="flx-center">
          <SelectVxeTreeOne
            v-model={searchParam.EQ_orgid}
            placeholder="请选择机构"
            url="system/org/query"
            query-form={{ sorts: "cts@asc" }}
          />
        </div>
      );
    }
  },
  {
    prop: "LIKE_userName",
    label: "登录名",
    width: 100,
    el: "input"
  },
  {
    prop: "LIKE_nickName",
    label: "姓名",
    width: 180,
    el: "input"
  }
];

const _tableOptions = {
  title: "用户管理",
  queryUrl: "system/user/query",
  operUrl: "system/user",
  tableColumns: _tableCols,
  searchColumns: _searchCols,
  initParam: _initParam
};

// 重新拉取表格数据
const fetchTableData = () => {
  kingTable.value?.getTableList();
};

/**
 * 增删查按钮执行的业务操作
 * @param {*} type 当前执行操作的类型
 * @param {*} row
 */
const handleBtnAction = async (type: string, row: any) => {
  switch (type) {
    case operateType.ADD: // 新增操作
      console.info(_initParam.LIKE_orgid);
      if (typeof _initParam.LIKE_orgid == "undefined" || _initParam.LIKE_orgid == "") {
        failMsg("请选择左边树节点");
        return;
      }
      editRef.value.showDialog({ orgid: _initParam.LIKE_orgid });
      break;
    case operateType.EDIT: // 编辑操作
      editRef.value.showDialog(row, type);
      break;
    case operateType.DETAIL: // 查询操作
      infoRef.value.showDialog(row);
      break;
    case operateType.DEL: // 删除操作
      kingTable.value?.handleDelete(row);
      break;
    case operateType.BATCH_DEL: // 批量删除操作
      kingTable.value?.handleBatchDelete();
      break;
  }
};
</script>

<style lang="scss" scoped>
.wrap-container {
  position: relative;
  padding: 0 !important;
  background: $base-color-background !important;
}
</style>
